@use './variables' as *;

// 页面头部样式
.page-header {
  background: $bg-primary;
  padding: $spacing-xl;
  border-radius: $radius-xl;
  box-shadow: $shadow-sm;
  margin-bottom: $spacing-xl;
  border: 1px solid $border-light;

  h1 {
    color: $text-primary;
    margin: 0 0 $spacing-sm 0;
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, $primary-color, $primary-dark);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  p {
    color: $text-secondary;
    margin: 0;
    font-size: 1.1rem;
  }
}

// 卡片样式
.section-card {
  background: $bg-primary;
  border-radius: $radius-xl;
  box-shadow: $shadow-sm;
  overflow: hidden;
  border: 1px solid $border-light;
  transition: all 0.3s ease;

  &:hover {
    box-shadow: $shadow-md;
    transform: translateY(-1px);
  }
}

.section-header {
  background: linear-gradient(135deg, $bg-tertiary, $bg-secondary);
  padding: $spacing-lg $spacing-xl;
  border-bottom: 1px solid $border-color;
  display: flex;
  justify-content: space-between;
  align-items: center;

  h2 {
    margin: 0;
    color: $text-primary;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: $spacing-sm;
  }
}

.record-count {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  color: $primary-dark;
  padding: $spacing-xs $spacing-sm + $spacing-xs;
  border-radius: $radius-xl;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid rgba(2, 132, 199, 0.2);
}

// 表单样式
.stock-form {
  display: flex;
  flex-direction: column;
  gap: $spacing-md;
  padding: $spacing-xl;

  .form-group {
    display: flex;
    flex-direction: column;
    gap: $spacing-sm;

    label {
      font-weight: 500;
      color: $text-primary;
      font-size: 0.95rem;
    }

    input, select {
      padding: $spacing-sm + $spacing-xs;
      border: 1px solid $border-color;
      border-radius: $radius-md;
      font-size: 1rem;
      transition: all 0.2s ease;
      background-color: $bg-primary;

      &:focus {
        outline: none;
        border-color: $primary-color;
        box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
      }

      &:hover {
        border-color: $secondary-light;
      }
    }
  }

  .submit-btn {
    background: linear-gradient(135deg, $primary-color, $primary-dark);
    color: white;
    border: none;
    padding: $spacing-sm + $spacing-xs $spacing-lg;
    border-radius: $radius-md;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: $shadow-sm;

    &:hover {
      background: linear-gradient(135deg, $primary-dark, #0369a1);
      box-shadow: $shadow-md;
      transform: translateY(-1px);
    }

    &:active {
      transform: translateY(0);
    }
  }
}

// 表格样式
.stock-list {
  padding: $spacing-xl;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  .table-container {
    flex: 1;
    overflow-y: auto;
    border-radius: $radius-md;
    border: 1px solid $border-color;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    background: $bg-primary;

    th, td {
      padding: $spacing-sm + $spacing-xs;
      text-align: left;
      border-bottom: 1px solid $border-light;
    }

    th {
      background: linear-gradient(135deg, $bg-tertiary, $bg-secondary);
      font-weight: 600;
      color: $text-primary;
      position: sticky;
      top: 0;
      z-index: 10;
    }

    tr {
      transition: background-color 0.2s ease;

      &:hover {
        background-color: rgba(14, 165, 233, 0.02);
      }
    }
  }
}

// 状态标签样式
.status {
  padding: $spacing-xs $spacing-sm;
  border-radius: $radius-xl;
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-block;

  &.status-holding {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1976d2;
    border: 1px solid rgba(25, 118, 210, 0.2);
  }

  &.status-sold {
    background: linear-gradient(135deg, #f3e5f5, #e1bee7);
    color: #7b1fa2;
    border: 1px solid rgba(123, 31, 162, 0.2);
  }

  &.status-target {
    background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
    color: #388e3c;
    border: 1px solid rgba(56, 142, 60, 0.2);
  }
}

// 盈亏样式
.profit {
  color: $success-color;
  font-weight: 600;
}

.loss {
  color: $error-color;
  font-weight: 600;
}

// 操作按钮样式
.actions {
  display: flex;
  gap: $spacing-sm;
  align-items: center;

  .status-select {
    padding: $spacing-xs;
    border: 1px solid $border-color;
    border-radius: $radius-sm;
    font-size: 0.875rem;
    background: $bg-primary;

    &:focus {
      outline: none;
      border-color: $primary-color;
    }
  }

  .delete-btn {
    background: linear-gradient(135deg, $error-color, #dc2626);
    color: white;
    border: none;
    padding: $spacing-xs $spacing-sm;
    border-radius: $radius-sm;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background: linear-gradient(135deg, #dc2626, #b91c1c);
      transform: translateY(-1px);
    }
  }
}

// 空状态样式
.empty-state {
  text-align: center;
  padding: $spacing-2xl;
  color: $text-secondary;

  p {
    font-size: 1.1rem;
    margin: 0;
  }
}